<template>
    <div class="wrapper">
        <!--<div class="status-bar" :style="{'height': statusBarHeight}"></div>-->
        <div class="top">
            <image src="bmlocal://assets/home-header.jpg" style="width: 750px; height: 363px;"></image>
            <text class="header">NB-Iot Toolkit</text>
        </div>
        <div class="panel">
            <image class="panel-bg" src="bmlocal://assets/home-panel-bg.jpg"></image>
            <div class="panel-content">
                <div class="panel-links">
                    <text class="link" @click="toLionsparty">狮享会商城</text>
                    <text class="link" @click="jump('frequency')">频率换算</text>
                    <text class="link" @click="jump('power')">功率转换</text>
                    <text class="link" @click="jump('about')">关于</text>
                </div>
            </div>
        </div>
        <div class="touch-bar" :style="{'height': touchBarHeight}"></div>
    </div>
</template>

<script>
    import { Utils } from 'weex-ui';
    export default {
        data(){
            return {
                curHomeBackTriggerTimes: 1,
                maxHomeBackTriggerTimes: 2,
                statusBarHeight: weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40,
                touchBarHeight: weex.config.eros.touchBarHeight ? weex.config.eros.touchBarHeight : 20
            }
        },
        created(){
            const domModule = weex.requireModule('dom');
            domModule.addRule('fontFace', {
                'fontFamily': "iconfont",
                'src': "url('bmlocal://iconfont/nbiot/iconfont.ttf')"
            });
            this.androidFinishApp();
        },
        methods:{
            androidFinishApp() {
                const globalEvent = weex.requireModule('globalEvent');
                globalEvent.addEventListener('homeBack', options => {
                    if (this.curHomeBackTriggerTimes === this.maxHomeBackTriggerTimes) {
                        this.$router.finish();
                    } else {
                        this.curHomeBackTriggerTimes++;
                        this.$notice.toast({message: `再点一次应用将关闭`})
                    }
                })
            },
            jump(url){
                this.$router.open({
                    name: url,
                    navShow: url !== 'yhq.index'
                })
            },
            toLionsparty(){
                // this.$router.open({
                //     url: 'pages/demo/index.js',
                //     navShow: url !== 'yhq.index'
                // })
                // Utils.goToH5Page('http://m.lionsparty.com')
                this.$router.toWebView({
                    title: '狮享会商城',
                    url: 'http://m.lionsparty.com'
                })
            }
        }
    }
</script>

<style scoped>
    .top{

    }
    .header{
        font-size: 60px;
        color: #FFFFFF;
        position: absolute;
        top: 40px;
        left: 20px;
        width: 750px;
    }
    .panel{
        margin-top: 40px;
        position: relative;
    }
    .panel-bg{
        width: 750px;
        height: 320px;
    }
    .panel-content{
        margin-top: -200px;
        width: 750px;
    }
    .panel-links{
        margin-left: 30px;
        margin-right: 30px;
        flex-direction: column;
        background-color: #FFFFFF;
        border-radius: 10px;
    }
    .link{
        color: #7d7d7d;
        height: 80px;
        font-size: 40px;
        padding-top: 20px;
        padding-left: 30px;
        border-bottom-color: #EEEEEE;
        border-bottom-width: 0.5px;
        border-style: solid;
    }
</style>
